<!--  -->
<template lang="html">
  <div 
    :id="id" 
    :style="{width:width+'px',height:height+'px',margin:'34rpx auto'}" 
    class="m-map"/>
</template>

<script>
export default {
    props:{
        width:{
            type:Number,
            default:300
        },
        height:{
            type:Number,
            default:300
        },
        point:{
            type:Array,
            default(){
                return [116.49,39.92]
            }
        }
    },
    data() {
        return {
            id:`map`,
            key:'b366873e9dc6e3e0dce51b91d487d372'
        }
    },
    watch:{
        point:function(val,old){
            this.map.setCenter(val)
            this.marker.setPosition(val)
        }
    },
    mounted(){
        let self=this;
        self.id=`map${Math.random().toString().slice(4,6)}`

        window.onmaploaded = () => {
            let map = new window.AMap.Map(self.id,{
                resizeEnable:true,
                zoom:11,
                center:self.point
            })
            self.map=map
            window.AMap.plugin('AMap.ToolBar',()=>{
                let toolbar = new window.AMap.ToolBar()
                map.addControl(toolbar)
                let marker = new window.AMap.Marker({
                    icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                    position:self.point
                })
                sele.marker=marker
                marker.setMap(map)
            })
        }
       const url = `https://webapi.amap.com/maps?v=1.4.10&key=${self.key}&callback=onmaploaded`
        let jsapi = document.createElement('script')
        jsapi.charset = 'utf-8'
        jsapi.src=url
        document.head.appendChild(jsapi)
    }
}

</script>
<style lang='scss' >
</style>